<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background: #FAFAFD;
        }
        .flex{
            display: flex;
            justify-content: space-between;
        }
        .box{
            width: 1200px;
            margin: 100px auto;
        }
        .left{
            width: 700px;
        }
        .left h1{
            font-size: 54px;
            letter-spacing: 2px;
        }
        .right{
            width: 400px;
        }
        .left-bottom{
            width: 100%;
            margin-top: 150px;
        }
        .b-t>div,.b-b>div{
            box-sizing: border-box;
            width: 50%;
            height: 200px;
            
        }
        .type{
            color: #3749EB;
            font-size: 14px;
            font-weight: 600;
        }
        .left input{
            width: 300px;
            height: 50px;
            outline: none;
            border: none;
            border-bottom: 1px solid #A09FA9;
            background: none;
            font-size: 22px;
            font-weight: 600;
            margin-top: 10px;
        }
        .left button{
            background: none;
            padding: 4px 9px;
            border: 1px solid #DADADC;
            border-radius: 5px;
            color: #514F64;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .mt20{
            margin-top: 20px;
        }
        .text-center{
            text-align: center;
        }
        .right button{
            width: 300px;
            height: 55px;
            background: #3749EB;
            color: #fff;
            border: none;
            font-size: 20px;
            border-radius: 10px;
            margin-top: 20px;
            letter-spacing: 2px;
        }
        canvas{
            box-shadow: 0px 0 10px #ccc;
            /* background: url(img/yuangong.jpg); */
            background-size: 100% 100%;
        }
        .relative{
            position: relative;
        }
        .absolute{
            position: absolute;
        }
        img.absolute{
            top: 28px;
            width: 100px;
            left: 0px;
        }
        .mb10{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="flex box">
        <div class="left">
            <h1>工牌制作</h1>
            <div class="left-bottom">
                <div class="b-t flex">
                    <div class="relative">
                        <p class="type mb10">上传图片</p>
                        <canvas width="100" height="100"></canvas>
                        <img class="absolute add" src="img/add.png"  alt="">
                       
                    </div>
                    <div>
                        <p class="type">部门</p>
                        <input type="text" onchange="bumenEnd(this)" placeholder="请输入部门名称">
                        
                    </div>
                </div>
                <div class="b-b flex">
                    <div>
                        <p class="type">职位</p>
                        <input type="text" onchange="zhiweiEnd(this)" placeholder="请输入职位">
                    </div>
                    <div>
                        <p class="type">姓名</p>
                        <input type="text" id="user"  onchange="xingmingEnd(this)" placeholder="请输入姓名">
                    </div>
                </div>
            </div>
        </div>
        <div class="right text-center">
            <canvas id="myCanvas" width="250" height="416"></canvas>

            <br>
            <button onclick="d()">一键下载</button>
            <input hidden type="file" class="file">
        </div>
    </div>
    <script>
        var cas = document.getElementById('myCanvas')
        var addImg = document.getElementsByClassName('add')[0]
        var file = document.getElementsByClassName('file')[0]
        var ctx = cas.getContext('2d')
        ctx.textAlign= 'center'
        ctx.font= '13px 微软雅黑'

        var img  = new Image()
        img.src = 'img/yuangong.jpg'
        img.onload = function(){
            ctx.drawImage(img,0,0,250,416)
        }

        var imgUrl = ''


        addImg.onclick = function(){
            file.click()
        }
        file.onchange = function(){
            var casUser = document.getElementsByTagName('canvas')[0]
            var ctxUser = casUser.getContext('2d')
            ctxUser.arc(50,50,50,0,2*Math.PI,true)
            ctxUser.clip();
            var fs = new FileReader()
            fs.readAsDataURL(file.files[0])
            fs.onload = function(){
                var img  = new Image()
                img.src = fs.result
                img.id = 'addImg'
                img.onload = function(){
                    document.body.appendChild(img)
                    var x = document.getElementById('addImg').offsetWidth
                    var y = document.getElementById('addImg').offsetHeight
                    ctxUser.drawImage(img,10,0,80,y*80/x)
                    document.getElementById('addImg').remove()

                    imgUrl = casUser.toDataURL("image/png")
                    var userImg = new Image()
                    userImg.src = imgUrl
                    userImg.onload = function(){
                        ctx.drawImage(userImg,70,150,110,110)
                    }
                }
            }
        }
        

        function bumenEnd(that){

            ctx.fillStyle='#fff'
            ctx.fillRect(90,300,120,24)
            ctx.fillStyle='#000'

            ctx.fillText(that.value,142,322)
        }

        function zhiweiEnd(that){
            ctx.fillStyle='#fff'
            ctx.fillRect(90,328,120,24)
            
            ctx.fillStyle='#000'

            ctx.fillText(that.value,142,349)
        }

        function xingmingEnd (that){
            ctx.fillStyle='#fff'
            

            ctx.fillRect(90,270,120,27)
            ctx.fillStyle='#000'
            ctx.fillText(that.value,142,294)
        }

        function d(){
            var base64 = cas.toDataURL("image/png")
            var a = document.createElement("a");
            a.download = '工作证-' + user.value; // 下载文件的名称
            a.href = base64; 
            document.body.appendChild(a); 
            a.click();
            a.remove();
        }
      
       
        
        
    </script>
</body>
</html>